<template>
  <div class="select_warpper">
    <a-select v-model:value="select" style="width: 300px">
      <template v-for="item in list" :key="item.queId">
        <a-select-option :value="item.queId">{{
          item.queTitle
        }}</a-select-option>
      </template>
    </a-select>
  </div>
</template>
<script lang="ts">
import { SETTINGAPPEARANCE } from '@/router/route-name';
import { useManageQueryStore } from '@/store/manage';
import { useSettingBasicStore, useTopNavStore } from '@/store/setting';
import { computed, defineComponent } from 'vue';
import { useRoute, useRouter } from 'vue-router';
export default defineComponent({
  components: {},
  setup() {
    const navStore = useTopNavStore();
    const basicStore = useSettingBasicStore();
    const manageStore = useManageQueryStore();
    const router = useRouter();
    const route = useRoute();

    manageStore.queryAll();

    const list = computed(() => navStore.getSelect);

    const select = computed<string>({
      get() {
        return basicStore.queId;
      },
      set(value) {
        basicStore.setQuestId(value);
        basicStore.queryDetails(value);
        const name = route.name ?? SETTINGAPPEARANCE;
        router.push({ name: name, query: { queId: value } });
      },
    });
    return { list, select };
  },
});
</script>
<style lang="less" scoped></style>
